<template>
  <div>
    <h4>1.个人信息 (遍历对象{})</h4>
    <ul>
      <li v-for="(value, key, index) in info" :key="key">
        {{ value }}-{{ key }}-{{ index }}
      </li>
    </ul>
    <h4>2.遍历数字number</h4>
    <ul>
      <li v-for="(num, index) in 3" :key="num">{{ num }}-{{ index }}</li>
    </ul>
    <h4>3.遍历数组</h4>
    <ul>
      <li v-for="item in items" :key="item.id">
        <input
          type="checkbox"
          :checked="item.checked"
          @change="toggleCheckbox(item)"
        />
        {{ item.name }}
      </li>
    </ul>
    <h4>4.v-for和template结合使用</h4>
    <template v-for="item in items2">
      <div :key="item.id">
        <h2>{{ item.title }}</h2>
        <p>{{ item.description }}</p>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'page-day12',
  data() {
    return {
      info: {
        name: '张三',
        age: 18,
        height: 1.88
      },
      items: [
        { id: 1, name: 'Item 1', checked: true },
        { id: 2, name: 'Item 2', checked: false },
        { id: 3, name: 'Item 3', checked: false }
      ],
      items2: [
        { id: 1, title: 'Item 1', description: 'Description for Item 1' },
        { id: 2, title: 'Item 2', description: 'Description for Item 2' },
        { id: 3, title: 'Item 3', description: 'Description for Item 3' }
        // ...更多项目
      ]
    }
  },
  methods: {
    toggleCheckbox(item) {
      item.checked = !item.checked
    }
  }
}
</script>

<style lang="scss" scoped></style>
